﻿/*
    Css编写规则：
    1、布局：外间距(margin)、边框(border)、内间距(padding)、宽(width)、高(height)
        a、长度(length)
        b、样式(style)
        c、颜色或图片(color)
        4、位置(flow)
    2、文字
        a、字体名称(font-family)
        b、字号(font-size)
        c、粗细(font-weight)
        d、样式(font-style)
        e、颜色(color)
        f、行高(line-height)
        g、排列(text-align)
        h、英文字母大写(font-variant)
        i、文本流方向(direction )                
    3、其它
        a、Css Hack：FF(!important) IE7(*或!important) IE6(*或_)
    4、文件结构
        a、Styles\xxx-<version number>.css
        b、Styles\Themes\<skin name>\xxx-<version number>.css
    
cSun文件描述
    1、默认包括YUI的cssreset、cssfonts（增加一个宋体\5b8b\4f53,预备换成微软雅黑5fae\8f6f\96c5\9ed1）和cssbase，不再重复编写
    2、通过栅格设计方式简单和规范页面布局
*/
body {
    font: 12px/1.5; /* 中文字体必须为12的整数，行高为18PX，因为后面大多数单行都将是18PX */
}


legend {
    margin: 1em 0;
    font-size: 123.1%;
    font-weight: bold;
}

header, #content, footer {
    margin-top: 10px;
}

footer {
    border-top: 1px solid #D1D7DC;
    padding-top: 10px;
}

#copyright {
    display: table-cell;
    margin-left: 50px;
}

/* 
    栅格布局 W=A*n-i
    i=10  A=20
*/


.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12, .c13, .c14, .c15, .c16, .c17, .c18, .c19, .c20, .c21, .c22, .c23, .c24, .c25, .c26, .c27, .c28, .c29, .c30, .c31, .c32, .c33, .c34, .c35, .c36, .c37, .c38, .c39, .c40, .c41, .c42, .c43, .c44, .c45, .c46, .c47, .c48 {
    display: table-cell;
    margin: 0 5px 0;
}

.c1 {
    /* width=20*n-10 */
    width: 10px;
}

.c2 {
    width: 30px;
}

.c4 {
    width: 70px; /* 20*4-10 */
}

.w4 {
    width: 80px;
}

.c10 {
    width: 190px;
}

input[type=password],input[type=text], .w9 {
    line-height: 18px;
    height: 18px;
    vertical-align: middle;
    border: 1px solid #c8c8c8;
    padding: 3px;
    margin: 0 10px;
    width: 164px;
}

.c14 {
    width: 270px;
}

.c16 {
    width: 310px;
}

.c20 {
    width: 390px;
}

.c24 {
    width: 470px;
}

.c28 {
    width: 550px;
}

.c32 {
    width: 630px;
}

.c40 {
    width: 790px;
}

.c48, .p950 {
    width: 950px;
}

.c48a, .p950a {
    min-width: 950px;
}

.p950 {
    margin-left: auto;
    margin-right: auto;
}

.property {
    margin-top: 12px;
}


fieldset label {
    display: inline-block;
    text-align: right;
}

button, .button {
    padding: .5em 2em .55em; /*根据文字自适应大小*/
    border: 0 none;
    cursor: pointer;
    text-align: center;
    vertical-align: bottom;
    color: black;
    /*圆角 像素越大半经越大*/
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    /*阴影 颜色*/
    /*-webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;*/
    /*背景色渐近*/
    background: #99FF99;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#99FF99), to(#339933)); /* Safari and Chrome */
    background: -webkit-linear-gradient(#99FF99, #339933); /* Safari and Chrome */
    background: -moz-linear-gradient(#99FF99, #339933); /* Firefox */
    background: -ms-linear-gradient(#99FF99, #339933); /* <IE10 */
    background: -o-linear-gradient(#99FF99, #339933); /* Opera */
    background: linear-gradient(#99FF99, #339933); /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
    -pie-background: linear-gradient(#99FF99, #339933); /* PIE */
    behavior: url(/Styles/PIE.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

    button:hover, .button:hover {
        color: blue;
        background: #1a1a1a;
        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ececec), to(#1a1a1a));
        background: -webkit-linear-gradient(#ececec, #1a1a1a);
        background: -moz-linear-gradient(#ececec, #1a1a1a);
        background: -ms-linear-gradient(#ececec, #1a1a1a);
        background: -o-linear-gradient(#ececec, #1a1a1a);
        background: linear-gradient(#ececec, #1a1a1a);
        -pie-background: linear-gradient(#ececec, #1a1a1a);
    }

    button:active {
        color: white;
        background: #F8F8FC;
        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8FC), to(#334B99));
        background: -webkit-linear-gradient(#F8F8FC, #334B99);
        background: -moz-linear-gradient(#F8F8FC, #334B99);
        background: -ms-linear-gradient(#F8F8FC, #334B99);
        background: -o-linear-gradient(#F8F8FC, #334B99);
        background: linear-gradient(#F8F8FC, #334B99);
        -pie-background: linear-gradient(#F8F8FC, #334B99);
    }
